// 该文件用于创建 vuex 插件中 最为核心的 store

// 引入 vuex 插件
import Vuex from 'vuex'

// 引入 vuex
import Vue from 'vue'

// 使用插件
// 创建 vuex 之前必须先 use(vuex)
Vue.use(Vuex)

// 1、准备 actions：用于响应组件中的动作
const actions = {

    // actions 中多做 业务逻辑 if else 以及 ajax 请求
    // 注意：不要直接在 actions 中更新 state
    // 
    increment(context){
        console.log("进入 actions 中的 increment",context);
        context.dispatch("m1",1);
    },
    m1(context,val){

        console.log("业务逻辑过于复杂,m1 方法正在处理",val);
        context.dispatch("m2",val+1);
    },

    m2(context,val){

        console.log("业务逻辑还是挺复杂,m2方法继续处理",val);
        context.commit("INCREMENT");
    },
 
}

// 2、准备 mutations：用于操作数据(state)
const mutations = {
    // mutations 中尽量不要写业务逻辑，只用于更新数据
    INCREMENT(state){
        console.log("进入 mutations 中的 INCREMENT",state);
        state.sum += state.selectValue
    },
    DECREMENT(state){
        state.sum -= state.selectValue
    },
    UPDATE_SELECT_VAL(state,val){
        state.selectValue = val
    },

    ADD_PERSON(state,person){
        state.personList.unshift(person)
    }
}

// 3、准备 stats：用于存储数据
const state = {
    selectValue:1,
    sum:0,
    schooleName:"尚硅谷大学，注意不要拼写错误",

    personList:[
        {
            id:1,
            name:'罗俊华'
        },{
            id:2,
            name:"小高"
        }
    ]
}

// 4、准备 getters：用于将 state 中的数据进行加工
const getters = {

    // 返回处理过的 sum
    processedSum(state){

        return state.sum * 10;
         
    }

};

// 5、创建 store 
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

// 导出 store
export default store